<template>
  <div class="dialog">
    <div class="dialog-content">
      <div id="title" style="color: #8b0000;"><slot name="title">slot1</slot></div>
      <slot name="text">slot2</slot>
      <div class="dialog-buttons">
        <button @click="confirmExit">确认</button>
        <button @click="cancelExit">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    confirmExit() {
      // 确认退出逻辑
      console.log("用户确认退出系统");
      // 可以在这里调用退出系统的API或其他逻辑
    },
    cancelExit() {
      // 取消退出逻辑
      console.log("用户取消退出系统");
      // 可以在这里关闭弹窗
    }
  }
};
</script>

<style>


.dialog-content {
  background-color: white;
  padding: 20px;
  border: 1px solid black;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialog-buttons {
  margin-top: 20px;
}

.dialog-buttons button {
  margin: 0 10px;
  padding: 8px 16px;
  cursor: pointer;
}
#title{
  text-align: left;
}
</style>